<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
    <link rel="stylesheet" href="/css/login.css" />
    <title>送水后台管理系统</title>
</head>

<body>
<div class="body">
    <!--<img src="/img/tubiao-09.png" class="logo" />-->
    <p class="logo">送水后台管理系统</p>
    <div class="body_count">
        <div class="login_count">
            <div class="login_count_a">
                <div class="login_count_a_l">
                    <div class="login_a_l_t">扫码登录点这里</div>
                    <div class="triangle"></div>
                    <img src="/img/tubiao-02.png" class="icon_e" />
                </div>
                <div id="all">
                    <ul id="option">
                        <li class="active login_left">密码登录</li>
                        <li class="login_right">免密登录</li>

                    </ul>
                    <ul id="card">

                        <!--密码登录-->
                        <li class="active" >
                            <form th:action="@{/account/login}" th:method="post">
                                <!--输入框-->
                                <div class="login_bot_count">
                                    <img src="/img/tubiao-07.png" alt="userName" />
                                    <input type="text" name="userName"  placeholder="请输入账号" />
                                </div>
                                <div class="login_bot_count">
                                    <img src="/img/tubiao-06.png" alt="userPwd" />
                                    <input type="password" name="userPwd"  placeholder="请输入密码"  />
                                </div>
                                <div class="login_bot">
                                    <a th:href="@{/account/register}" style="font-size: 14px;color: blue">免费注册</a>
                                    <a style="font-size: 14px;color: red">忘记密码?</a>
                                </div>
                                <!--登录按钮-->
                                <button class="login_button" type="submit">登录</button>
                                <!--
                                   th:if="${not #strings.isEmpty(loginFail)}" 判断后台传递的loginFail是否为非空
                                   当条件成立在P标签里面显示“loginFail”对应的值
                               -->
                                <!--  <p style="color:red"
                                     th:if="${not #strings.isEmpty(loginFail)}"
                                     th:text="${loginFail}">
                                  </p>-->
                                <p style="color:red"
                                   th:if="${not #strings.isEmpty(loginFail)}"
                                   th:text="${loginFail}">
                                </p>
                            </form>
                        </li>



                        <!--手机登录-->
                        <li class="login_account">
                            <form th:action="@{/account/loginPhone}" th:method="post">
                                <!--输入框-->
                                <div class="login_account_count">
                                    <img src="/img/tubiao-05.png" alt="" />
                                    <select class="account_select">
                                        <option value="+86">+86</option>
                                        <option value="+852">+852</option>
                                        <option value="+853">+853</option>
                                        <option value="+886">+886</option>
                                    </select>
                                    <img src="/img/line-down.png" alt="" class="account_select_icon" />
                                    <input type="" id="phone" name="phone" class="mobile_input" placeholder="请输入手机号码"  />
                                </div>
                                <div class="login_account_counts">
                                    <img src="/img/tubiao-06.png" alt="" />
                                    <input type="" name="clientCheckCode" id="code" placeholder="请输入验证码" />
                                    <input class="account_code" type="button" id="btn" value="获取验证码" />
                                </div>
                                <!--登录按钮-->
                                <button class="login_account_button" type="submit">登录</button>
                                <p style="color:red"
                                   th:if="${not #strings.isEmpty(msg)}"
                                   th:text="${msg}">
                                </p>
                            </form>
                        </li>
                    </ul>
                </div>

            </div>

            <div class="login_count_b">
                <div class="login_count_b_l">
                    <div class="login_b_l_t">账号登录点这里</div>
                    <div class="triangle"></div>
                    <img src="/img/tubiao-03.png" class="icon_z" />
                </div>
                <div class="login_b_title">
                    <img src="/img/tubiao-04.png" alt="" /> 微信扫码登录
                </div>
                <img src="/img/ewm.png" class="libqr" />
                <p class="libqr_text">请使用微信扫描二维码登录</p>
            </div>

        </div>

    </div>
</div>

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="/js/login.js" ></script>

<script>
    //1.给按钮绑定点击事件
    $("#btn").click(function (){
        //2.获取输入框的值
        var num = $("#phone").val();
        alert(num)
        //3.发起ajax请求,携带输入框的值
        //参数要按照顺序写: 路径,请求参数,回调函数,返回的数据类型
        $.get("/account/send/"+num,function (resp){},"JSON");
    });
</script>
</body>

</html>